- 综合排序
- 最热优先
- 最新优先
- 来自专栏采云轩
Tree Shaking
什么是 Tree Shaking Tree-shaking (摇树) 是一个术语，通常指通过打包工具"摇"我们的代码，将未引用代码 (Dead Code) "摇" 掉。 Tree Shaking 具体做了什么 我们通过例子来详细了解一下 Webpack 中 Tree Shaking 到底做了什么 未使用的函数消除 // utils.js export function Tree Shaking 和 sideEffects 提到 Tree Shaking 就要聊一下 sideEffects。 使用支持 Tree Shaking 的包。 /guides/tree-shaking/)
97330编辑于 2022-12-01 - 来自专栏coding个人笔记
Tree-shaking
Tree-shaking是webpack内置的一个优化，主要功能就是去除没有用到代码。 因为JavaScript大多数是要通过加载的，加载的文件越小，性能越好，所以Tree-shaking对于优化JavaScript很有意义。 Tree-shaking主要依赖于ES6的模块化import和export，我们都知道ES6的module只能是顶层出现，和运行时无关，不能运行时加载，Tree-shaking主要就是依靠这个基础进行静态分析 如果是require，需要执行后才知道有没有引用，就无法进行Tree-shaking。 所以当你觉得Tree-shaking无效的时候，可以用看看打包出来的代码是否有副作用。当然，这一块本人觉得还是当一条咸鱼忽略吧。
68030发布于 2020-05-29 - 来自专栏鲸鱼动画
Tree Shaking概念详解
Tree Shaking 值的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我需要的代码，这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。 官方有标准的说法：Tree-shaking的本质是消除无用的js代码。 通过 Tree-Shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 Shaking "sideEffects": ["@babel/poly-fill"], //该模块不进行Tree Shaking 为什么某些引入模块不希望进行Tree Shaking呢？ 在package.json中进行配置，即匹配到的任何css文件都不进行Tree Shaking ?
1.2K20发布于 2020-10-10 - 来自专栏源码揭秘
揭秘 Rollup Tree Shaking
rollup依赖于ES6的module，提供Tree-shaking功能。对其直译为树木摇晃，即将树木上面枯死的树叶摇晃下来。对应到编程中则是去除掉无用代码。这对于大型项目能起到一定优化作用。 而此文主要是想研究tree-shaking功能，故翻看rollup提交记录，找到rollup@0.2.0最初可用版本。 文件数量和代码行数都比较少，也方便我们能读懂。 shaking 将调试文件内容做如下修改，测试tree-shaking功能 // . 依赖的变量有做修改操作 经过上述处理，已经基本实现简易tree-shaking功能，但是对于如下依赖文件中导出变量有做过修改还需处理 // . shaking 上述tree-shaking是针对于有import语句时的处理，对于入口文件有定义但未使用变量时，还需处理 var company = 'sohu focus' var companyAge
3.3K20编辑于 2022-02-14 - 来自专栏YuanXin
八：JS Tree Shaking
本文简述了webpack3 和 webpack4在 JS Tree Shaking 上的区别，并详细介绍了在 webpack4 环境下如何对 JS 代码 和 第三方库 进行 Tree Shaking。 JS 的 Tree Shaking 依赖的是 ES2015 的模块系统（比如：import和export） 本文介绍Js Tree Shaking在webpack v4中的激活方法。 2. 说明Js Tree Shaking成功。 3. 如何处理第三方JS库？ 对于经常使用的第三方库（例如 jQuery、lodash 等等），如何实现Tree Shaking？ 并没有进行Tree Shaking。 3.2 第三方库的模块系统 版本 本文开头讲过，js tree shaking 利用的是 es 的模块系统。 显然，tree shaking成功。 友情提示：在一些对加载速度敏感的项目中使用第三方库，请注意库的写法是否符合 es 模板系统规范，以方便webpack进行tree shaking。 终
1.5K10发布于 2020-04-20 - 来自专栏『学习与分享之旅』
webpack-JS-Tree-Shaking
Tree-Shaking 概述过滤掉无用的 JS 代码和 CSS 代码, 我们称之为 Tree-Shaking例如: 在 a.js 中引入了 b 模块, b 模块中有 2 个方法, 但是我只用到了 1 /guides/tree-shaking 在这里就不在写多余的废物案例了，就直接介绍一下开启环境和生产环境的使用即可，如果是在开发环境当中的话需要修改开发环境的 webpack.config.js, 也就是修改 所以博主这里就先排除掉 CSS 相关的过滤，修改 package.json 配置, 告诉 webpack 哪些文件不做 Tree-Shaking：图片"sideEffects": [ "*.css" 相关配置和使用，接下来就是生产环境的 Tree-Shaking 相关使用，其实在生产环境模式中，是无需进行任何配置的, webpack 默认已经实现了 Tree-Shaking 直接利用 npm run prod 打包即可：图片注意点只有 ES module 导入才支持 Tree-Shaking任何导入的文件都会受到 Tree-Shaking 的影响这意味着，如果在项目中使用类似 css-loader
46200编辑于 2023-09-28 - 来自专栏YuanXin
九：CSS-Tree-Shaking
CSS 也有 Tree Shaking？ 是滴，随着 webpack 的兴起，css 也可以进行 Tree Shaking： 以去除项目代码中用不到的 CSS 样式，仅保留被使用的样式代码。 CSS 也有 Tree Shaking？ 是滴，随着 webpack 的兴起，css 也可以进行 Tree Shaking： 以去除项目代码中用不到的 CSS 样式，仅保留被使用的样式代码。 为了方便理解 Tree Shaking 概念，并且与 JS Tree Shaking 进行横向比较，请查看：webpack4 系列教程(八): JS Tree Shaking 2. 项目环境仿真 因为 CSS Tree Shaking 并不像 JS Tree Shaking 那样方便理解，所以首先要先模拟一个真实的项目环境，来体现 CSS 的 Tree Shaking 的配置和效果 认识下 PurifyCSS 没错，就是这货帮助我们进行 CSS Tree Shaking 操作。
1.3K30发布于 2020-04-20 - 来自专栏coding for love
4-1 Tree Shaking 概念详解
简介 tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。 使用 tree-shaking 摇晃掉多余的代码 现在我们尝试利用 tree shaking 方法来摇晃掉未被使用的代码。 注意，任何导入的文件都会受到 tree shaking 的影响。 而 production 下，会自动为我们开启 tree-shaking。 所以只有 es-module 才可以被 tree-shaking。
1.3K20发布于 2020-02-19 - 来自专栏Young Dreamer
webpack中tree-shaking技术介绍
正基于此，webpack2引入了tree-shaking技术，能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块，而不被引用或不被执行的模块被删除掉，以起到减包的效果。 webpack的tree-shaking案例 下面结合实际代码来解释webpack2是如何实现tree-shaking的，示例代码可到github进行下载。 webpack的tree-shaking的局限性 （1）只能是静态声明和引用的ES6模块，不能是动态引入和声明的； 在打包阶段对冗余代码进行删除，就需要webpack需要在打包阶段确定模块文件的内部结构 /module2'; } 而CommonJS模块支持动态结构的，所以不能对CommonJS模块进行tree-shaking处理。 （2）只能处理模块级别，不能处理函数级别的冗余； 因为webpack的tree-shaking是基于模块间的依赖关系，所以并不能对模块内部自身的无用代码进行删除。
1.1K50发布于 2018-01-31 - 来自专栏前端全栈开发者
Webpack 的 Tree Shaking 概念详解
webpack 2.0 开始引入 tree shaking 技术，翻译过来的中文意思就是摇树，它可以在打包时忽略没有用到的代码。 ? 疼！ 大连这些树快被摇断了 机制简述 tree shaking 是 rollup 作者首先提出的。这里有一个比喻： 如果把代码打包比作制作蛋糕。 因此，相比于 排除不使用的代码，tree shaking 其实是找出使用的代码。 Tree shaking 两步走： webpack 负责对代码进行标记，把 import & export 标记为 3 类： 所有 import 标记为 /* harmony import */ 基于 ES6 的静态引用，tree shaking 通过扫描所有 ES6 的 export，找出被 import 的内容并添加到最终代码中。
1.4K30发布于 2019-12-31 - 来自专栏前端小菜鸟
Tree-Shaking的工作原理
Tree-shaking （树摇）最早是由Rollup实现，是一种采用删除不需要的额外代码的方式优化代码体积的技术，webpack2借鉴了这个特性也增加了tree-shaking的功能。 tree-shaking 只能在静态modules下工作，在ES6之前我们使用CommonJS规范引入模块，具体采用require()的方式动态引入模块，这个特性可以通过判断条件解决按需记载的优化问题， } else { module = requitre('BeyModule'); } 但是CommonJS规范无法确定在实际运行前需要或者不需要某些模块，所以CommonJS不适合tree-shaking bey from "Bey"; import other from "Other" if(condition) { // hello } else { // bey } Tree-shaking ES6 Modules in webpack 2 Tree-Shaking性能优化实践 - 原理篇
4.2K03发布于 2020-05-06 - 来自专栏前端技术江湖
Webpack 实现 Tree shaking 的前世今生
项目减重之 rollup 的 Tree-shaking，那你一定对 tree-shaking 不陌生了。 如果对 tree-shaking 相关知识不熟悉，请先点开上面这篇文章花 5 分钟了解一下：什么是 tree-shaking。 众所周知，原本不支持 tree-shaking 的 Webpack 在它的 2.x 版本也实现了 tree-shaking，好奇心又来了，rollup 从一开始就自实现了 tree-shaking，而 Tree-shaking 实现机制 快速浏览完官方文档和一众文章后，发现 webpack 实现 tree-shaking 的方式还不止一种！但是，都与 rollup 不同。 webpack4 的时候还要手动配置一下压缩插件，但最新的 webpack5 已经内置实现 tree-shaking 啦！在生产环境下无需配置即可实现 tree-shaking !
1.5K20发布于 2021-07-12 - 来自专栏终身学习者
精准的打包 — Webpack 的 Tree Shaking
作者： 神Q超人 译者：前端小智 来源：medium 前阵子在和朋友聊 Webpack 的时候，突然提到 Tree Shaking，但很惭愧的是我没有办法好好说明 Webpack 是如何做到 Tree Tree Shaking 是什麽 Tree Shaking 是个优化的方式，在 JavaScript 中用来表示移除没用的代码的一个常见术语，之所以叫做 Tree Shaking 的由来似乎是指说“当你大力摇晃一棵树的时候 Shaking 的工作前，应该会有些人好奇，就算自己从来就没有特别在 Webpack 中设置 Tree Shaking，但是没有用的代码也都会被移除呀！ 那是因为 Tree Shaking 的执行需要 ModuleConcatenationPlugin（图一），而 Webpack 里另外有个 mode，如果你一直没有特别去设置 mode 的值，那 mode 设置方法如下： { "name": "tree-shaking", "sideEffects": [".
75020编辑于 2022-03-22 - 来自专栏采云轩
Rollup 与 Webpack 的 Tree-shaking
Rollup 与 Webpack 的 Tree-shaking http://zoo.zhengcaiyun.cn/blog/article/tree-shaking Rollup 和 Webpack 本文就来简单分析下两者 Tree-shaking 的流程和效果差异。 Tree-shaking 的目的 Tree-shaking 的目标只有一个，去除无用代码，缩小最终的包体积，至于什么算是无用代码呢？ 关于 Tree-shaking 的问题也欢迎你在下面留言讨论。 /guide/introduction#tree-shaking)
1.8K30编辑于 2022-12-01 - 来自专栏2014前端笔记
Tree-shaking VS dead code elimination 【翻译】
这里是原文链接Tree-shaking versus dead code elimination 我一直致力于一个叫rollup的工具，它可以将js各个模块打包在一起。 其中他有一个特性叫tree-shaking，他会只将你程序需要的js代码打包进去。 有人问我这个概念从哪里得来的？ tree-shaking,则是完全相反的一方面，告诉我我要做什么蛋糕，混合的时候需要什么原料。 相比较dead code， 我们推荐live code。 ## Limits of Rollup’s tree-shaking Rollup现在根据顶层的ASTnode节点来打包，而不是零碎的层级，所以他包含的代码可能比他需要的更多。 ## Rollup is about more than tree-shaking rollup的目标是生产一个最高效的打包工具，看起来就像是我们写的一样。
1K30发布于 2019-11-20 - 来自专栏猫哥学前班
Import 方式对 Tree-shaking 的影响
[xos41w4w5d.png] 最近从小被子那里学了不少 Tree-shaking 的知识，Tree-shaking 译作“摇树优化”，是 DCE（Dead Code Elimination）优化的一种实现 DIY 首先我们使用以下命令，来搭建一套实验环境，加深对 Tree-shaking 的理解。 补充：Vue SFC 写法对 Tree-shaking 的影响 Tree-shaking 的使用场景，主要是为了将第三方 npm 模块中未用到的代码剔除出打包后的文件。 如果是项目本身的 src 文件，Tree-shaking 的意义并不大。 [Vue SFC & Tree-shaking]
4.2K30发布于 2019-06-27 - 来自专栏Tecvan
Webpack 原理系列九：Tree-Shaking 实现原理
一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 1.1 在 Webpack 中启动 Tree Shaking 在 Webpack 中，启动 Tree Shaking 功能必须同时满足三个条件： 使用 ESM 规范编写模块代码 配置 optimization.usedExports ，或使用一些补丁技术帮助 Webpack 更精确地检测无效代码，完成 Tree Shaking 操作。 Shaking 的包 如果可以的话，应尽量使用支持 Tree Shaking 的 npm 包，例如： 使用 lodash-es 替代 lodash ，或者使用 babel-plugin-lodash 基本上不太需要进行 Tree Shaking。
2.8K11编辑于 2021-12-09 - 来自专栏网络日志
Tree-Shaking性能优化实践 - 原理篇
什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS Tree-shaking 较早由 Rich_Harris 的 rollup 实现，后来，webpack2 也增加了tree-shaking 的功能。 二. tree-shaking的原理 Tree-shaking的本质是消除无用的js代码。 Tree-shaking 和传统的 DCE的方法又不太一样，传统的DCE 消灭不可能执行的代码，而Tree-shaking 更关注宇消除没有用到的代码。 (2) 再来看一下Tree-shaking消除大法 前面提到了tree-shaking更关注于无用模块的消除，消除那些引用了但并没有被使用的模块。
69210编辑于 2024-06-12 - 来自专栏IMWeb前端团队
webpack2 的 tree-shaking 好用吗？
tree-shaking 较早由 Rich_Harris 的 rollupjs 实现，webpack2 也引入了tree-shaking 的能力。 什么是 tree-shaking ？ tree-shaking 可以形象的理解为摇树。在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。 所以，其实使用 tree-shaking 的局限性还是比较大。 适用场景 目前看到使用 tree-shaking 比较成功的例子是 d3-jsnext ，不过使用的是 rollupjs 的方案。 参考 Tree shaking completely broken? uglifyjs 配合webpack 压缩代码的一个思路 Tree shaking and "unused harmony default export webpack2 官方 tree-shaking
1.7K30发布于 2019-12-05 - 来自专栏IMWeb前端团队
webpack2 的 tree-shaking 好用吗？
tree-shaking 较早由 Rich_Harris 的 rollupjs 实现，webpack2 也引入了tree-shaking 的能力。 什么是 tree-shaking ？ tree-shaking 可以形象的理解为摇树。在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。 通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 实际效果如何 所有示例在 tree-shaking-demo 示例 1 main.js import { A } from '. 0});var e=r(0);console.log(e.a)}]); 为什么 tree-shaking 不能消除带有副作用的代码。
1.7K50发布于 2018-01-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号